<template>
  <div class="shenqingXQ" style="margin-left: 15px">
    <p class="shenqing">详细信息
      <!-- 返回按钮 -->
      <el-button type="warning" icon="el-icon-download" size="mini" @click="exportList" >导出</el-button>
      <el-button type="primary" icon="el-icon-back" size="mini" @click="goback">返回上一页</el-button>
    </p>
    <table border="1" rules="all" class="tablestyle">
      <tr>
        <td class="nameclass" >申请名称</td>
        <td class="neirongclass">{{queryParams.pickName}}</td>
        <td class="nameclass" >用途</td>
        <td class="neirongclass">{{queryParams.useing}}</td>
      </tr>
      <tr>
        <td class="nameclass"  >申请月份</td>
        <td class="neirongclass">{{queryParams.planMonth}}</td>
        <td class="nameclass" >班组</td>
        <td class="neirongclass">{{queryParams.teamName}}</td>
      </tr>
      <tr>
        <td class="nameclass" >资金来源</td>
        <td class="">
          <el-select
            disabled
            style="width: 100%"
            v-model="queryParams.moneySource"
            placeholder="请选择"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in zjlyList"
              :key="dict.id"
              :label="dict.cpName"
              :value="dict.id"
            />
          </el-select>
        </td>
        <td class="nameclass" >仓库</td>
        <td class="neirongclass">{{queryParams.waName}}</td>
      </tr>
      <tr>
        <td class="nameclass" >备注</td>
        <td  class="neirongclass" >
          {{queryParams.note}}
        </td>
        <td class="nameclass" >提交时间</td>
        <td class="neirongclass" >{{queryParams.crtTime}}</td>
      </tr>
    </table>
    <el-table  :data="this.tableLatejihua" stripe style="margin-left: 15px;width: 95%;margin-top: 20px"
               border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <!-- <el-table-column align="center" label="科室" property="depOffName"  width="200" ></el-table-column> -->
      <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="物料名称"  property="mname"  ></el-table-column>
      <el-table-column align="center" label="物料规格"  property="mmodel"  ></el-table-column>
      <el-table-column align="center" label="分类名称"  property="typeName" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="单位"  property="unit"  ></el-table-column>
      <el-table-column align="center" label="计划价"  property="planPrice"  ></el-table-column>
      <el-table-column align="center" label="技术参数"  property="technicalParameters" :show-overflow-tooltip="true" v-if="false" ></el-table-column>
      <el-table-column align="center" label="物料状态"  property="mtype" :show-overflow-tooltip="true" width="150" v-if="false">
        <template slot-scope="scope" style="text-align: center">
          <div style="padding-left: 5px;padding-right: 5px; background:#78BF34  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='1'" >招标采购</div>
          <div style="padding-left: 5px;padding-right: 5px; background:#9E71DC ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='2'">产业协同</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#DEA11E  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='3'">战略采购</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='4'">询比价</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='5'">长协</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="采购方式"  property="purchasingMethod" :show-overflow-tooltip="true" width="150" v-if="false" >
        <template slot-scope="scope" style="text-align: center">
          <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='1'" >正常</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='2'">慎用</div>
          <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='3'">关闭</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='4'">新增</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="需求数"  property="demandNum"  > </el-table-column>
      <el-table-column align="center" label="备注"  property="note"  > </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "Role",
    data() {
      return {
          //页码信息
        XQpage:undefined,
        XQsize:undefined,
        tableLatejihua:[],
        zjlyList:[],
        queryParams:{
          // id:'',
          // pickName:'',
          // useing:'',
          // planMonth:'',
          // note:'',
          // teamId:'',
          // moneySource:'',
          // wzPickingApplyInfos:[]
        },
        //导出参数
        dcME:{
          depIds:'',
          fileName:'',
          cjDate:''
        }
      };
    },
    created() {
      console.log('接收-采购申请详情',this.$route.query)
      this.queryParams = this.$route.query.pp.row
      this.XQpage = this.$route.query.page
      this.XQsize = this.$route.query.size
      this.dcME.depIds = this.queryParams.id
      this.dcME.fileName = this.queryParams.pickName
      this.dcME.cjDate = this.queryParams.crtTime
      console.log(this.dcME)
      this.getMessage()
      this.getZjly()
    },
    methods: {
      //获取资金来源
      getZjly:function(){
        request({
          url: '/method/costproject/listByMydepId ',
          method: 'get',
        }).then(response => {
          this.zjlyList =  response.rows;
          console.log('资金来源', this.zjlyList)
        });
      },
      goback () {
        this.$router.push({path:'/suppliesLLGL/pickingSummary',query:{page:this.XQpage,size:this.XQsize}});
      },
      //获取数据
      getMessage () {
        request({
          url:'material/apply/'+this.queryParams.id,
          method:'get',
        }).then(response =>{
          console.log(response)
          this.tableLatejihua = response.data.wzPickingApplyInfos
        })
      },
      /** 导出按钮操作 */
      exportList() {
        this.$confirm('是否确认导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          console.log(123)
          this.derive()
          console.log(456)
          // return this.download(res.data)
        }).catch((e)=> {
        })
      },
      //导出
      derive() {
        request({
          url:'/material/info/export2',
          method:'get',
          params:this.dcME
        }).then(response =>{
          console.log(response)
           return this.download(response.data)
        })
      },
    }
  };
</script>
<style>
  .shenqingXQ .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .shenqingXQ .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    width: 800px;
  }

  .shenqingXQ .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
  .shenqingXQ .nameclass {
    width: 164px;height: 34px;text-align: center;
  }
  .shenqingXQ .neirongclass {
    padding-left: 16px;
    font-size: 14px;
    width: 220px;
  }
  .shenqingXQ .el-input--small .el-input__inner {
    border: none;
  }
</style>
